<template>
  <div style="padding: 24px">
    <a-card
      v-for="(question, index) in questions"
      :key="index"
      style="margin-bottom: 24px"
      :title="`填空题 ${index + 1}`"
    >
      <div class="question-title">
        {{ question.contentChoice.title }}
      </div>

      <a-input
        v-model:value="question.userAnswer"
        placeholder="请输入答案"
        style=" margin: 16px 0"
        @pressEnter="() => handleSubmit(question)"
      />
      <a-button type="primary" @click="() => handleSubmit(question)">提交答案</a-button>

      <div v-if="question.checked" style="margin-top: 16px">
        <a-alert
          :message="question.userAnswer.trim() === question.answer.trim() ? '回答正确' : `回答错误，正确答案是：${question.answer}`"
          :type="question.userAnswer.trim() === question.answer.trim() ? 'success' : 'error'"
          show-icon
        />
        <a-collapse style="margin-top: 12px">
          <a-collapse-panel key="1" header="答案解析">
            {{ question.analysis }}
          </a-collapse-panel>
        </a-collapse>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted, defineEmits, defineExpose } from 'vue'
import { useRoute } from 'vue-router'
import { listQuestions } from "@/api/bizQuesstionController"

const emit = defineEmits(['answer-change'])
const route = useRoute()
const videoID = route.params.videoId
const questions = ref([])
// 暴露给父组件的方法和数据
defineExpose({
  getAnswerStatus,
  getAllQuestions,
  isAllAnswered
})


onMounted(async () => {
  try {
    const res = await listQuestions({ 
      questionType: 3,
      questionTag: videoID,
      page: 1,
      size: 10
    })
    const list = res.data?.data?.records || []

    questions.value = list
      .filter(q => Number(q.questionType) === 3 && q.content)
      .map(q => ({
        ...q,
        contentChoice: JSON.parse(q.content),
        userAnswer: '',
        isCorrect: false
      }))
  } catch (error) {
    console.error('题目加载失败：', error)
  }
})

function handleSubmit(question) {
  question.checked = true
}
</script>

<style scoped>
.question-title {
  /* font-size: 16px; */
  font-weight: 500;
}
</style>
